<template>
	<view class="app-order-goods-info">
		<view class='dir-left-nowrap item-box' :style="{'margin-bottom': isLastOne ? '24rpx' : 0}">
			<image class='img box-grow-0' mode='aspectFill' :src='goods.pic_url'></image>
			<view class='box-grow-1'>
				<view class='goods-name'>{{goods.name}}<text
						v-if="goodsdetail.is_abbuy == 1">-{{goodsdetail.abbuy_type}}</text></view>
				<view class='attr'>规格：
					<text v-for='item in goods.attr_list' :key='item.id'>{{item.attr_name}}</text>
				</view>
				<view class='dir-left-nowrap' v-if="qunjielong">
					<view class='box-grow-1 goods-num'>x{{goods.num}}</view>
					<view class='box-grow-0' v-if="plugin == 'composition'">
				  <view class='main-right price delete-price'>￥{{goods.total_price}}</view>
					</view>
					<view class='box-grow-0 dir-left-nowrap' v-else>
						<view v-if="pluginData && pluginData.exchange_list && pluginData.exchange_list.length"
							class="price">{{pluginData.exchange_list[pluginIndex].value}}{{pluginData.price_name}}+
						</view>
						<view class='main-right price'>
							￥{{pluginData.price_list ? pluginData.price_list[pluginIndex].value : goods.total_price}}
						</view>
					</view>
				</view>
				<view class='dir-left-nowrap' v-else>
					<view class='box-grow-1 goods-num'>x{{goods.num}}</view>
					<view class='box-grow-0' v-if="plugin == 'composition'">
						<!-- 9.9 全款不加中划线 -->
						<view class='main-right price'>定金￥{{goods.total_goods_price}}</view>
						<view class='main-right price'>全款￥{{goods.total_original_price}}</view>
					</view>
					<view class='box-grow-0 dir-left-nowrap' v-else>
						<view v-if="pluginData && pluginData.exchange_list && pluginData.exchange_list.length"
							class="price">{{pluginData.exchange_list[pluginIndex].value}}{{pluginData.price_name}}+
						</view>
						<view class='main-right price'>
							<!-- 定金￥{{pluginData.price_list ? pluginData.price_list[pluginIndex].value : goods.total_goods_price}} -->定金￥{{goods.total_goods_price}}
						</view>
						<!-- 9.9 全款不加中划线 -->
						<view class='main-right price' style="margin-left: 10rpx;">
							全款￥{{goods.total_original_price}}</view>
					</view>
				</view>
				<view class="composition-price" v-if="plugin == 'composition'">
					搭配套餐价<text>￥{{goods.total_price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'app-order-goods-info',
		data() {
			return {}
		},
		props: {
			goods: {
				type: Object,
				default: {}
			},
			goodsdetail: {
				type: Object,
				default: {}
			},
			plugin: {
				type: String,
				default: ''
			},
			isLastOne: {
				type: Boolean,
				default: true
			},
			pluginData: {
				type: Object,
				default: {}
			},
			pluginIndex: {
				type: Number,
				default: 0,
			},
			qunjielong: {
				type: Boolean,
				default: false
			}
		},
	}
</script>
<style scoped lang="scss">
	.app-order-goods-info {
		font-size: 24#{rpx};
		width: 100%;

		.img {
			width: 160#{rpx};
			height: 160#{rpx};
			margin-right: 20#{rpx};
			flex-shrink: 0;
		}

		.item-box {
			width: 100%;
			margin-bottom: 24#{rpx};
		}

		.label {
			color: $uni-general-color-two;
		}

		.price {
			color: $uni-important-color-black;

			&.delete-price {
				text-decoration: line-through;
			}
		}

		.composition-price {
			text-align: right;
			font-size: #{22rpx};
			color: #999999;

			text {
				font-size: #{28rpx};
				color: #353535;
				margin-left: #{8rpx};
			}
		}

		.goods-num {
			font-size: $uni-font-size-weak-one;
			color: $uni-general-color-two;
		}

		.attr {
			width: 450#{rpx};
			margin: 10#{rpx} 0;
			color: $uni-general-color-two;
			font-size: $uni-font-size-weak-one;
			display: inline-block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			text {
				margin-right: 10#{rpx};
			}
		}

		.goods-name {
			color: $uni-important-color-black;
			font-size: $uni-font-size-general-two;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}
</style>
